#include("../layout.html")
#@layout("文章")

#define dropdown(parents, key, depth, parent)
#for(x : parents[""+key+""])
<option #if(x.term_id.equals(parent)) selected="selectd" #end value="#(x.term_id)">#(java.lang.String::join("", java.util.Collections::nCopies(depth, "— ")) + x.name)</option>
#if(null != parents[""+x.term_id+""])
#@dropdown(parents, x.term_id, depth+1, parent)
#end
#end
#end

#define head()
<style type="text/css">
#screen-meta-links {
    margin: 0 0 0 0;
}

#contextual-help-link-wrap, #screen-options-link-wrap {
    float: right;
    height: 28px;
    margin: 0 0 0 6px;
    border: 1px solid #ddd;
    border-top: none;
    background: #fff;
    box-shadow: 0 1px 1px -1px rgba(0,0,0,.1);
}

#screen-meta-links .screen-meta-toggle {
    position: relative;
    top: 0;
}

#screen-meta-links .show-settings {
    border: 0;
    background: 0 0;
    border-radius: 0;
    color: #72777c;
    line-height: 1.7;
    padding: 3px 6px 3px 16px;
}

#screen-meta-links .show-settings:after {
    right: 0;
    content: "\e625";
    font-size: 14px;
    font-family: layui-icon!important;
    display: inline-block;
    padding: 0 5px 0 0;
    position: relative;
    vertical-align: middle;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-decoration: none!important;
    color: #72777c;
}

#screen-meta {
    margin: 0 0 -1px 0;
    position: relative;
    background-color: #fff;
    border: 1px solid #ddd;
    border-top: none;
    box-shadow: 0 1px 0 rgba(0,0,0,.025);
}

#contextual-help-wrap, #screen-options-wrap {
    margin: 0;
    padding: 8px 20px 12px;
    position: relative;
}
#contextual-help-wrap {
    padding: 0;
}

fieldset {
    border: 0;
    padding: 0;
    margin: 0;
}
fieldset label {
    vertical-align: middle;
}

#contextual-help-wrap h5, #screen-options-wrap h5, #screen-options-wrap legend {
    margin: 0;
    padding: 8px 0;
    font-size: 13px;
    font-weight: 600;
}

.hidden {
    display: none;
}

b, strong {
    font-weight: 600;
}

/**显示选项*/
.metabox-prefs label {
    display: inline-block;
    padding-right: 15px;
    line-height: 30px;
}
.metabox-prefs label input, .metabox-prefs label input[type=checkbox] {
    margin: -4px 5px 0 0;
}
.metabox-prefs .screen-options input, .metabox-prefs .screen-options label {
    margin-top: 0;
    margin-bottom: 0;
    vertical-align: middle;
}
.metabox-prefs .screen-options label {
    line-height: 28px;
    padding-right: 0;
}
.metabox-prefs .screen-options .screen-per-page {
    margin-right: 15px;
}

p {
    font-size: 13px;
    line-height: 1.5;
    margin: 1em 0;
}
.submit {
    padding: 1.5em 0;
    margin: 5px 0;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
    border: none;
}
p.submit {
    text-align: left;
    max-width: 100%;
    margin-top: 20px;
    padding-top: 10px;
}
.metabox-prefs .submit {
    margin-top: 1em;
    padding: 0;
}

.button, .button-primary, .button-secondary {
    display: inline-block;
    text-decoration: none;
    font-size: 13px;
    line-height: 26px;
    height: 28px;
    margin: 0;
    padding: 0 10px 1px;
    cursor: pointer;
    border-width: 1px;
    border-style: solid;
    -webkit-appearance: none;
    border-radius: 3px;
    white-space: nowrap;
    box-sizing: border-box;
}
.button-primary {
    background: #0085ba;
    border-color: #0073aa #006799 #006799;
    box-shadow: 0 1px 0 #006799;
    color: #fff;
    text-decoration: none;
    text-shadow: 0 -1px 1px #006799,1px 0 1px #006799,0 1px 1px #006799,-1px 0 1px #006799;
}
p .button {
    vertical-align: baseline;
}

/**帮助*/
#contextual-help-back {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 150px;
    right: 170px;
    border: 1px solid #e1e1e1;
    border-top: none;
    border-bottom: none;
    background: #f6fbfd;
}
#contextual-help-columns {
    position: relative;
}
.contextual-help-tabs {
    float: left;
    width: 150px;
    margin: 0;
}
.contextual-help-sidebar {
    width: 150px;
    float: right;
    padding: 0 8px 0 12px;
    overflow: auto;
}
.contextual-help-tabs-wrap {
    padding: 0 20px;
    overflow: auto;
}
.contextual-help-tabs ul {
    margin: 1em 0;
}
.contextual-help-tabs li {
    margin-bottom: 0;
    list-style-type: none;
    border-style: solid;
    border-width: 0 0 0 2px;
    border-color: transparent;
}
.contextual-help-tabs .active {
    padding: 0;
    margin: 0 -1px 0 0;
    border-left: 2px solid #00a0d2;
    background: #f6fbfd;
    box-shadow: 0 2px 0 rgba(0,0,0,.02),0 1px 0 rgba(0,0,0,.02);
}
.contextual-help-tabs a {
    display: block;
    padding: 5px 5px 5px 12px;
    line-height: 18px;
    text-decoration: none;
    border: 1px solid transparent;
    border-right: none;
    border-left: none;
}
.contextual-help-tabs .active a {
    border-color: #e1e1e1;
    color: #32373c;
}

.help-tab-content {
    display: none;
    margin: 0 22px 12px 0;
    line-height: 1.6em;
}
.help-tab-content.active {
    display: block;
}
.help-tab-content ul li {
    list-style-type: disc;
    margin-left: 18px;
}
</style>
#end

#define body()
<!-- 显示选项/帮助 开始 -->
<div style="padding: 0 15px;">
    <div id="screen-meta" class="metabox-prefs">
        <div id="contextual-help-wrap" class="hidden" tabindex="-1" aria-label="“上下文帮助”选项卡">
            <div id="contextual-help-back"></div>
            <div id="contextual-help-columns">
                <div class="contextual-help-tabs">
                    <ul>
                        <li id="tab-link-overview" class="active">
                            <a href="#tab-panel-overview" aria-controls="tab-panel-overview">
                                概述								</a>
                        </li>

                        <li id="tab-link-screen-content">
                            <a href="#tab-panel-screen-content" aria-controls="tab-panel-screen-content">
                                页面内容								</a>
                        </li>

                        <li id="tab-link-action-links">
                            <a href="#tab-panel-action-links" aria-controls="tab-panel-action-links">
                                可进行的操作								</a>
                        </li>

                        <li id="tab-link-bulk-actions">
                            <a href="#tab-panel-bulk-actions" aria-controls="tab-panel-bulk-actions">
                                批量操作								</a>
                        </li>
                    </ul>
                </div>

                <div class="contextual-help-sidebar">
                    <p><strong>更多信息：</strong></p><p><a href="https://codex.wordpress.org/Posts_Screen">管理文章文档</a></p><p><a href="https://wordpress.org/support/">支持论坛</a></p>					</div>

                <div class="contextual-help-tabs-wrap">

                    <div id="tab-panel-overview" class="help-tab-content active">
                        <p>本页面提供文章相关的所有功能。您可以自定义页面的样式来使工作更顺手。</p>							</div>

                    <div id="tab-panel-screen-content" class="help-tab-content">
                        <p>您可以通过以下方法来自定义本页面内容的显示方式：</p><ul><li>您可在“显示选项”中依据您的需要隐藏或显示每页显示的文章数量。</li><li>您可以通过点击列表上方的文字链接来过滤列表显示的项目——全部、已发布、草稿、回收站。默认视图中，显示所有文章。</li><li>您可以使用简单标题列表来查看文章，或是在显示选项面板种加入摘要。</li><li>通过在文章列表上方的下拉菜单中选择，您可单独查看显示某一分类中的文章，或是某月发布的文章。点击列表中作者、分类，或标签也可令列表只显示那些内容。</li></ul>							</div>

                    <div id="tab-panel-action-links" class="help-tab-content">
                        <p>将鼠标光标悬停在文章列表中的某一行，操作链接将会显示出来，您可以通过它们快速管理文章。您可进行下列操作：</p><ul><li>点击<strong>编辑</strong>可在编辑器中编辑该文章。直接点击文章标题也可以达到同样的效果。</li><li>点击<strong>快速编辑</strong>，您无须跳转到其它页面，在本页内就能对文章属性进行更改。</li><li>点击<strong>移至回收站</strong>，该文章将会从列表中删除，并自动移至回收站。在回收站中，您可永久删除它。</li><li>点击<strong>预览/查看</strong>，您的浏览器将跳转到前台，为您展示文章发布后的效果，或访问已经发布的这篇文章。</li></ul>							</div>

                    <div id="tab-panel-bulk-actions" class="help-tab-content">
                        <p>您也可以一次删除/回收多个文件。使用文章左侧的复选框，选择您需要操作的文件，然后从“批量操作”下拉菜单中选择您的操作类型。点击“应用”，操作即生效。</p><p>在使用“批量编辑”时，您可以一次编辑这些文章的多个属性（分类目录、作者等）。要从待编辑文章中移除某篇，请在“批量编辑”区域中点击其标题旁边的“x”。</p>							</div>
                </div>
            </div>
            <div style="clear:both;"></div>
        </div>
        <div id="screen-options-wrap" class="hidden" tabindex="-1" aria-label="“显示选项”选项卡">
            <form id="adv-settings" method="post">
                <fieldset class="metabox-prefs">
                    <legend>列</legend>
                    <label><input class="hide-column-tog" name="author-hide" type="checkbox" id="author-hide" value="author" checked="checked">作者</label>
                    <label><input class="hide-column-tog" name="categories-hide" type="checkbox" id="categories-hide" value="categories" checked="checked">分类目录</label>
                    <label><input class="hide-column-tog" name="tags-hide" type="checkbox" id="tags-hide" value="tags" checked="checked">标签</label>
                    <label><input class="hide-column-tog" name="comments-hide" type="checkbox" id="comments-hide" value="comments" checked="checked">评论</label>
                    <label><input class="hide-column-tog" name="date-hide" type="checkbox" id="date-hide" value="date" checked="checked">日期</label>
                </fieldset>
                <fieldset class="screen-options">
                    <legend>分页</legend>
                    <label for="edit_post_per_page">每页的项目数：</label>
                    <input type="number" step="1" min="1" max="999" class="screen-per-page" name="wp_screen_options[value]" id="edit_post_per_page" maxlength="3" value="20">
                    <input type="hidden" name="wp_screen_options[option]" value="edit_post_per_page">
                </fieldset>
                <fieldset class="metabox-prefs view-mode">
                    <legend>查看模式</legend>
                    <label for="list-view-mode">
                        <input id="list-view-mode" type="radio" name="mode" value="list" checked="checked">
                        列表视图				</label>
                    <label for="excerpt-view-mode">
                        <input id="excerpt-view-mode" type="radio" name="mode" value="excerpt">
                        摘要视图				</label>
                </fieldset>
                <p class="submit"><input type="submit" name="screen-options-apply" id="screen-options-apply" class="button button-primary" value="应用"></p>
                <input type="hidden" id="screenoptionnonce" name="screenoptionnonce" value="7d3eb7c485">
            </form>
        </div>
    </div>
    <div id="screen-meta-links">
        <div id="contextual-help-link-wrap" class="hide-if-no-js screen-meta-toggle" style="">
            <button type="button" id="contextual-help-link" class="button show-settings" aria-controls="contextual-help-wrap" aria-expanded="false">帮助</button>
        </div>
        <div id="screen-options-link-wrap" class="hide-if-no-js screen-meta-toggle" style="">
            <button type="button" id="show-settings-link" class="button show-settings" aria-controls="screen-options-wrap" aria-expanded="false">显示选项</button>
        </div>
    </div>
    <div style="clear:both;"></div>
</div>
<!-- 显示选项/帮助 结束 -->

<h1 class="wp-heading-inline">文章</h1>
<a href="/admin/post/create" class="page-title-action">写文章</a>
<hr class="wp-header-end">

<div class="layui-fluid">
    <h2 class="screen-reader-text">过滤文章列表</h2>
    <ul class="subsubsub">
        <li class="all"><a href="/admin/post" class="current" aria-current="page">全部<span class="count">（#(all)）</span></a> |</li>
        <li class="publish"><a href="/admin/post?post_status=publish">已发布<span class="count">（#(publish)）</span></a> |</li>
        <li class="sticky"><a href="/admin/post?show_sticky=1">置顶<span class="count">（#(sticky)）</span></a> |</li>
        <li class="draft"><a href="/admin/post?post_status=draft">草稿<span class="count">（#(draft)）</span></a> |</li>
        <li class="pending"><a href="/admin/post?post_status=pending">待审<span class="count">（#(pending)）</span></a> |</li>
        <li class="trash"><a href="/admin/post?post_status=trash">回收站<span class="count">（#(trash)）</span></a></li>
    </ul>

    <form id="posts-filter" class="layui-form">
        <div class="search-box">
            <label class="screen-reader-text" for="post-search-input">搜索文章:</label>
            <div class="layui-inline">
                <input type="search" id="post-search-input" name="q" value="#('q','')" placeholder="搜索文章标题或内容" class="layui-input">
            </div>
            <div class="layui-inline">
                <input type="submit" id="search-submit" class="layui-btn layui-btn-sm layui-btn-primary" value="搜索文章">
            </div>
        </div>
        <div class="tablenav top">
            <div class="alignleft actions bulkactions">
                <label for="bulk-action-selector-top" class="screen-reader-text">选择批量操作</label>
                <div class="layui-inline">
                    <select name="action" id="bulk-action-selector-top">
                        <option value="-1">批量操作</option>
                        <option value="trash">移至回收站</option>
                        <option value="restore">还原</option>
                        <option value="delete">永久删除</option>
                    </select>
                </div>
                <div class="layui-inline">
                    <input type="button" id="doaction" class="layui-btn layui-btn-sm layui-btn-primary" value="应用">
                </div>
            </div>
            <div class="alignleft actions">
                <label for="filter-by-date" class="screen-reader-text">按日期筛选</label>
                <div class="layui-inline">
                    <select name="m" id="filter-by-date">
                        <option selected="selected" value="0">全部日期</option>
                        #for(date : dateFilters)
                        <option value="#(date.value)" #if('m' == date.value)selected#end>#(date.text)</option>
                        #end
                    </select>
                </div>
                <label class="screen-reader-text" for="cat">按分类过滤</label>
                <div class="layui-inline">
                    <select name="cat" id="cat" class="postform">
                        <option value="0">所有分类目录</option>
                        #@dropdown(categoryFilters, 0, 0, 0)
                    </select>
                </div>
                <div class="layui-inline">
                    <input type="button" id="filter-action" class="layui-btn layui-btn-sm layui-btn-primary" value="筛选">
                </div>
                #if(('post_status') == 'trash')
                <div class="layui-inline">
                    <input type="button" id="empty-trash" class="layui-btn layui-btn-sm layui-btn-danger" value="清空回收站">
                </div>
                #end
            </div>
            <div class="tablenav-pages"></div>
            <br class="layui-clear">
        </div>

        <h2 class="screen-reader-text">文章列表</h2>
        <table class="layui-table" lay-skin="line" lay-even>
            <colgroup>
                <col width="30">
                <col>
                <col width="120">
                <col width="180">
                <col width="180">
                <col width="60">
                <col width="150">
            </colgroup>
            <thead>
            <tr align="left">
                <th><input type="checkbox" id="check-all" lay-skin="primary" lay-filter="checkall"></th>
                <th>标题</th>
                <th>作者</th>
                <th>分类目录</th>
                <th>标签</th>
                <th><i class="layui-icon layui-icon-chat"></i></th>
                <th>日期</th>
            </tr>
            </thead>
            <tbody>
            <!-- 文章列表将通过JavaScript动态加载 -->
            </tbody>
            #[[
            <script id="post-page-tpl" type="text/xml">
                {{# layui.each(d, function(index, item){ }}
                <tr align="left">
                    <td><input type="checkbox" name="post_ids" value="{{item.ID}}" lay-skin="primary" lay-filter="postCheckbox"></td>
                    <td>
                        <strong>
                            {{# if(item.post_status == 'trash') { }}
                            <span>{{item.post_title}}</span>
                            {{# } else { }}
                            <a href="/admin/post/edit?post={{item.ID}}">{{item.post_title}}</a>
                            {{# } }}
                            {{# if(item.sticky){ }}
                            —
                            <span class="post-state">置顶</span>
                            {{# } }}
                        </strong>
                        <div class="row-actions">
                            {{# if(item.post_status == 'trash') { }}
                            <span class="restore"><a href="javascript:;" onclick="layui.post.restore({{item.ID}})" aria-label="恢复此文章">恢复</a> | </span>
                            <span class="delete"><a href="javascript:;" onclick="layui.post.delete({{item.ID}})" aria-label="永久删除此文章">永久删除</a></span>
                            {{# } else { }}
                            <span class="edit"><a href="/admin/post/edit?post={{item.ID}}" aria-label="编辑文章">编辑</a> | </span>
                            <span class="trash"><a href="javascript:;" onclick="layui.post.trash({{item.ID}})" aria-label="移动此文章到垃圾箱">移至回收站</a></span>
                            {{# } }}
                        </div>
                    </td>
                    <td>
                        <a href="/admin/post?author={{item.author.ID}}">{{item.author.display_name}}</a>
                    </td>
                    <td>
                        {{# if(0 == item.categories.length){ }}
                        <span>—</span>
                        <span class="screen-reader-text">没有分类</span>
                        {{# }else{ }}
                        {{# layui.each(item.categories, function(i, e){ }}
                        <a href="/admin/post?category_name={{e.slug}}">{{e.name}}</a>
                        {{# if(i < item.categories.length - 1){ }}、{{# } }}
                        {{# }); }}
                        {{# } }}
                    </td>
                    <td>
                        {{# if(0 == item.tags.length){ }}
                        <span>—</span>
                        <span class="screen-reader-text">没有标签</span>
                        {{# }else{ }}
                        {{# layui.each(item.tags, function(i, e){ }}
                        <a href="/admin/post?tag_name={{e.slug}}">{{e.name}}</a>
                        {{# if(i < item.tags.length - 1){ }}、{{# } }}
                        {{# }); }}
                        {{# } }}
                    </td>
                    <td>
                        {{# if(0 == item.comments){ }}
                        <span>—</span>
                        <span class="screen-reader-text">无评论</span>
                        {{# }else{ }}
                        <a href="/admin/comment?post={{item.ID}}">{{item.comments}}</a>
                        {{# } }}
                    </td>
                    <td>
                        最后修改
                        <br/>
                        <abbr title="{{item.post_modified_gmt}}">{{item.post_modified_gmt}}</abbr>
                    </td>
                </tr>
                {{# }); }}
            </script>
            ]]#
            <tfoot>
            <tr align="left">
                <th><input type="checkbox" id="check-all-footer" lay-skin="primary" lay-filter="checkall"></th>
                <th>标题</th>
                <th>作者</th>
                <th>分类目录</th>
                <th>标签</th>
                <th><i class="layui-icon layui-icon-chat"></i></th>
                <th>日期</th>
            </tr>
            </tfoot>
        </table>

        <div class="tablenav bottom">
            <div class="alignleft actions bulkactions">
                <label for="bulk-action-selector-bottom" class="screen-reader-text">选择批量操作</label>
                <div class="layui-inline">
                    <select name="action2" id="bulk-action-selector-bottom">
                        <option value="-1">批量操作</option>
                        <option value="trash">移至回收站</option>
                        <option value="restore">还原</option>
                        <option value="delete">永久删除</option>
                    </select>
                </div>
                <div class="layui-inline">
                    <input type="button" id="doaction2" class="layui-btn layui-btn-sm layui-btn-primary" value="应用">
                </div>
            </div>
            #if(('post_status') == 'trash')
            <div class="alignleft actions">
                <div class="layui-inline">
                    <input type="button" id="empty-trash-bottom" class="layui-btn layui-btn-sm layui-btn-danger" value="清空回收站">
                </div>
            </div>
            #end
            <div class="tablenav-pages"></div>
            <br class="layui-clear">
        </div>
    </form>
</div>
#end

#define foot()
<script>
    layui.cache.page = 'post';

var $ = layui.$;
/**
 * 显示选项/帮助面板切换
 */
$('#contextual-help-link').on('click', function(){
    var $this = $(this);
    var $wrap = $('#contextual-help-wrap');

    if($wrap.hasClass('hidden')) {
        $wrap.removeClass('hidden');
        $('#screen-options-link-wrap').css('visibility', 'hidden');
    } else {
        $wrap.addClass('hidden');
        $('#screen-options-link-wrap').css('visibility', 'visible');
    }

    $('#screen-options-wrap').addClass('hidden');
});

$('#show-settings-link').on('click', function(){
    var $this = $(this);
    var $wrap = $('#screen-options-wrap');

    if($wrap.hasClass('hidden')) {
        $wrap.removeClass('hidden');
        $('#contextual-help-link-wrap').css('visibility', 'hidden');
    } else {
        $wrap.addClass('hidden');
        $('#contextual-help-link-wrap').css('visibility', 'visible');
    }

    $('#contextual-help-wrap').addClass('hidden');
});

/**
 * 帮助选项卡切换
 */
$('.contextual-help-tabs a').on('click', function(e){
    e.preventDefault();
    var $this = $(this);
    var tab = $this.attr('href');

    // 更新选项卡状态
    $('.contextual-help-tabs li').removeClass('active');
    $this.closest('li').addClass('active');

    // 更新内容显示
    $('.help-tab-content').removeClass('active');
    $(tab).addClass('active');
});

/**
 * 显示选项表单提交
 */
$('#screen-options-apply').on('click', function(e){
    e.preventDefault();

    // 隐藏列处理
    $('.hide-column-tog').each(function(){
        var column = $(this).val();
        var isChecked = $(this).prop('checked');
        $('table th, table td').each(function(){
            var index = $(this).index();
            var headerText = $('table thead th').eq(index).text().trim();
            if(headerText.indexOf(getColumnName(column)) > -1) {
                $(this).toggle(!isChecked);
            }
        });
    });

    // 分页数量处理
    var perPage = $('#edit_post_per_page').val();
    if(perPage) {
        // 这里可以添加更新分页的逻辑
        console.log('每页显示:', perPage);
    }

    // 关闭面板
    $('#screen-options-wrap').addClass('hidden');
    $('#contextual-help-link-wrap').css('visibility', 'visible');

    layer.msg('显示选项已更新');
});

function getColumnName(key) {
    var names = {
        'author': '作者',
        'categories': '分类目录',
        'tags': '标签',
        'comments': '评论',
        'date': '日期'
    };
    return names[key] || '';
}
</script>
#end